<template>
  <div class="SchemeCorrelation">
    <el-row class="headerText">
      <!-- <el-row>
        1、相关系数表示两只产品收益的相关性，相关性越接近1代表2只产品历史收益越趋同。相关系数为负，代表2只产品收益呈反向趋势。组合内资产相关系数
        越低，代表该组合分散化越好。
      </el-row>
      <el-row>* 2、产品1测算使用管理人旗下产品拟合净值。</el-row> -->
      <el-input
        class="wa-report-component-header-edit-box"
        type="textarea"
        resize="none"
        :autosize="{ minRows: 1, maxRows: 6 }"
        :rows="3"
        placeholder="请输入内容"
      >
      </el-input>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        :border="true"
        :cell-style="getCellStyle"
        :fit="true"
      >
        <el-table-column
          prop="index"
          show-overflow-tooltip
          label="序号"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          show-overflow-tooltip
          label="产品名称"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          v-for="(item, index) in columnName"
          :key="index"
          :prop="item.key"
          show-overflow-tooltip
          align="center"
          width="60"
        />
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ElementTable",
  data() {
    return {
      tableData: [
        {
          index: "1",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          index: "2",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
      columnName: [{ key: 1 }],
    };
  },
  methods: {
    getCellStyle(param) {
      const { row, columnIndex, rowIndex } = param;
      let val = row['column' + (columnIndex - 2)];
      if (columnIndex === 0 || rowIndex === 0 || columnIndex === 1) {
        return { background: '#c04d50', color: '#FFFFFF', fontSize: '10px' };
      } else {
        val = Number(val).toFixed(2);
        const color = this.selectColor(val);
        return { background: color, fontSize: '10px' };
      }
    },
    selectColor(val) {
      let color = '';
      if (val < -0.9) {
        color = '#4FC862';
      } else if (val < -0.8) {
        color = '#59E16F';
      } else if (val < -0.7) {
        color = '#63FA7B';
      } else if (val < -0.6) {
        color = '#72FA88';
      } else if (val < -0.5) {
        color = '#81FA94';
      } else if (val < -0.4) {
        color = '#90FAA1';
      } else if (val < -0.3) {
        color = '#9FFAAE';
      } else if (val < -0.2) {
        color = '#AFFABB';
      } else if (val < -0.1) {
        color = '#BEFAC7';
      } else if (val < 0) {
        color = '#CDFAD4';
      } else if (val < 0.1) {
        color = '#DCFAE1';
      } else if (val < 0.25) {
        color = '#EBFAED';
      } else if (val === '0.25') {
        color = '#ffffff';
      } else if (val < 0.3) {
        color = '#F8BFC0';
      } else if (val < 0.4) {
        color = '#F8B1B2';
      } else if (val < 0.5) {
        color = '#F8A2A3';
      } else if (val < 0.6) {
        color = '#F89495';
      } else if (val < 0.7) {
        color = '#F88687';
      } else if (val < 0.8) {
        color = '#F87779';
      } else if (val < 0.9) {
        color = '#f67a7b';
      } else if (val <= 1) {
        color = '#f8696b';
      } else {
        color = '#c04d50';
      }
      return color;
    },
  }
};
</script>

<style scoped>

.el-table >>> td {
  line-height: 16px !important;
  height: 16px !important;
  padding: 2px;
}

.el-table >>> .cell {
  line-height: 16px !important;
  height: 16px !important;
}

</style>
